<template>
    <div v-if="!isAdd">
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <el-radio-group v-model="formInline.typeId" @change="radioChange" size="small">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button label="1">实时新闻</el-radio-button>
                        <el-radio-button label="2">资源状况</el-radio-button>
                        <el-radio-button label="3">先进技术</el-radio-button>
                        <el-radio-button label="4">先进设备</el-radio-button>
                    </el-radio-group>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-button style="float: right" type="success" size="small" @click="isAdd = true">新增文章</el-button>
                </div>
            </el-col>
        </el-row>

        <el-table
                :data="informationList"
                style="width: 100%"
                height="660px">
            <el-table-column
                    align="center"
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="发布时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime|timestampToTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="文章标题"
                    width="400"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="文章分类"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.typeId=='1'?'实时新闻':
                        scope.row.typeId=='2'?'资源状况':
                        scope.row.typeId=='3'?'先进技术':
                        scope.row.typeId=='4'?'先进设备':''}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    align="center"
            >
                <template slot-scope="scope">
                    <span><el-tag
                            :type="scope.row.dr == '0'? '' : 'danger'">{{ scope.row.dr == '0'? '正常' : '已删除' }}</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="200"
                             align="center">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="formInline.userName"
                            placeholder="输入关键字搜索"
                            @input="inputChange"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="goToDetail(scope.row.id)">
                        查看详情
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
    <div v-else>
        <el-button @click="isAdd = false">返回</el-button>
        <AddInformation  v-bind:isAdd="isAdd" v-on:update:isAdd="changeIsAdd"></AddInformation>
    </div>
</template>

<script>
    import Pagination from '../components/Pagination'
    import AddInformation from "./AddInformation";

    export default {
        name: "Infomation",
        components: {
            Pagination,
            AddInformation
        },
        data() {
            return {
                isAdd: false,
                informationList: [],
                formInline: {
                    pageIndex: 1,
                    pageSize: 10,
                    typeId: '',
                    title: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },
        created() {
            this.getData(this.formInline)
        },
        methods: {
            changeIsAdd(val){
                this.isAdd = val
                this.formInline.pageIndex = 1
                this.pageparm.currentPage = 1
                this.getData(this.formInline)
            },
            radioChange(val) {
                this.formInline.pageIndex = this.pageparm.currentPage = 1
                this.pageparm.total = 0
                this.getData(this.formInline)
            },
            getData(param) {
                this.$axios.get("/api/information/query", {
                    params: param
                })
                    .then(res => {
                        this.informationList = res.data.data.resultList
                        this.pageparm.total = res.data.data.totalCount
                    }).catch(err => {
                    return Promise.reject(err);
                })
            },
            inputChange(val) {
                this.formInline.title = val
                this.formInline.pageIndex = 1
                this.pageparm.currentPage = 1
                this.getData(this.formInline)
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("/api/information/delete", this.$qs.stringify({
                        id: row.id
                    }))
                        .then(res => {
                            if (res.data.status == 200) {
                                this.$message.success(res.data.message)
                                this.getData(this.formInline)
                            } else {
                                this.$message.error(res.data.message)
                            }
                        })
                        .catch(err => {
                            return Promise.reject(err);
                        })
                }).catch(() => {
                });


            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.pageIndex = parm.currentPage
                this.formInline.pageSize = parm.pageSize
                this.getData(this.formInline)
            },
            goToDetail(id) {
                this.$router.push(
                    {
                        path:'/info/details',
                        query:{
                            id: id
                        }
                    })
            }
        }
    }
</script>

<style scoped>

</style>
